<template>
  <view class="news-detail">
    <u-navbar placeholder
              leftIcon="arrow-left"
              :title="$t('pages_event_detail_detail_msg_a091bb7e')"
              @leftClick="goBack" />
    <view class="com-mx-md com-text-lg">{{newsData.title}}</view>
	<view class="com-mx-md com-mt-sm com-font-md">{{newsData.createDate}}</view>
    <view class="detail-content">
      <view class="news-content" v-html="newsData.content"/>
    </view>
  </view>
</template>

<script>
export default {
  name: 'News-Detail',
  data() {
    return {
      newsData: {
        id: '',
        title: '',
        content: '',
        image: '',
        createDate: '',
        status: 0
      }
    }
  },
  onLoad(options) {
    // 接收传递过来的参数
	this.newsData = uni.getStorageSync('params')
  },
  methods: {
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.news-detail {
  background: #fff;
  min-height: 100vh;
}

.detail-content {
  padding: 40rpx 30rpx;
}

.news-content {
  font-size: 30rpx;
  line-height: 1.8;
  color: #333;
  
  :deep(p) {
    margin-bottom: 20rpx;
  }
  
  :deep(img) {
    max-width: 100%;
    height: auto;
    border-radius: 12rpx;
    margin: 20rpx 0;
  }
  
  :deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
    margin: 30rpx 0 20rpx 0;
    font-weight: 600;
    color: #222;
  }
  
  :deep(ul), :deep(ol) {
    margin: 20rpx 0;
    padding-left: 40rpx;
  }
  
  :deep(li) {
    margin-bottom: 10rpx;
  }
  
  :deep(blockquote) {
    margin: 20rpx 0;
    padding: 20rpx 30rpx;
    background: #f8f9fa;
    border-left: 6rpx solid #007bff;
    border-radius: 8rpx;
  }
  
  :deep(table) {
    width: 100%;
    border-collapse: collapse;
    margin: 20rpx 0;
  }
  
  :deep(th), :deep(td) {
    border: 1rpx solid #ddd;
    padding: 12rpx;
    text-align: left;
  }
  
  :deep(th) {
    background: #f8f9fa;
    font-weight: 600;
  }
}

::v-deep img, ::v-deep table{
width: 100%;
}
</style>